<!-- Dom模板 -->
<template>
  <div class="loginbox">
        <!-- Dom内容 -->
    <span class="iconfont icon-iconfontyoujiantou-zuo" @click="closes"></span>
    <div class="header">
      <h3>注册</h3>
      <p>新用户注册可以领10点券</p>
    </div>
    <div class="inputlogin">
      <span class="iconfont icon-user"></span>
      <input type="text" placeholder="用户名" v-model="username" />
      <div class="alert">
        <p ref="nonullf">用户名不可以为空</p>
      </div>
      <span class="iconfont icon-shouji"></span>
      <input type="text" placeholder="账号" v-model="user" />
      <div class="alert">
        <p ref="nonulls">账号不可以为空</p>
        <p ref="nophone">账号必须是11位的手机号</p>
      </div>
      <span class="iconfont icon-mima1"></span>
      <input
        type="password"
        placeholder="密码"
        v-model="pass"
        ref="passxianshi"
        v-show="passxianshi"
        class="passxianshi"
        show-password
      />
      <input
        type="text"
        placeholder="密码"
        v-model="pass"
        ref="passguanbi"
        class="passguanbi"
      />
      <div class="yi">
        <span class="iconfont icon-yanjing1" @click="xianshi" ref="yan"></span>
      </div>
      <div class="alert">
        <p ref="nonullt">密码不可以为空</p>
      </div>
      <p class="guize">
        密码必须是8-16位的数字，字母组合（不能是纯数字，不可以有特殊字符）
      </p>
      <div class="xuanzhong">
        <!-- <form action="" ref="form" :model="form" label-width="80px">
          <input type="checkbox" v-model="form.type" />
          <span label="是否想成为作者" name="type">是否想成为作者</span>
        </form> -->
      </div>
      <div class="but">
        <button class="register" @click="registeruser">注册</button>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from 'vant';
export default {
  components: {
    // Yescheck,
  },
  data() {
    return {
      msg: "测试",
      user: "",
      pass: "",
      username: "",
      passxianshi: true,
      form: {
        type: false,
      },
      arr:[],
      usern:""
    };
  }, // 生命周期 - 创建完成（访问当前this实例）
  created() {}, // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {}, // Vue方法定义
   watch: {
    user() {
      let value = this.user.replace(/\D/g, "").substr(0, 11); // 不允许输入非数字字符，超过11位数字截取前11位
      let len = value.length;
      if (len > 3 && len < 8) {
        value = value.replace(/^(\d{3})/g, "$1 ");
      } else if (len >= 8) {
        value = value.replace(/^(\d{3})(\d{4})/g, "$1 $2 ");
      }
      this.user = value;
      this.arr=this.user.split(" ")
      
      this.usern=this.arr.join('')
    },
  },
  methods: {
    xianshi() {
      if (this.passxianshi) {
        this.passxianshi = false;
        this.$refs.yan.classList = "iconfont icon-yanjing";
        this.$refs.passxianshi.style.display = "none";
        this.$refs.passguanbi.style.display = "block";
      } else if (!this.passxianshi) {
        this.passxianshi = true;
        this.$refs.yan.classList = "iconfont icon-yanjing1";
        this.$refs.passxianshi.style.display = "block";
        this.$refs.passguanbi.style.display = "none";
      }
    },
    registeruser() {
      let reg = /^(?=.*?[a-zA-Z])(?=.*?[0-9])[a-zA-Z0-9]{8,16}$/;
      let reg1 = /^1([38]\d|5[0-35-9]|7[3678])\d{8}$/;
      
      let str1 = this.usern;
      let resu1 = reg1.exec(str1);
      let str = this.pass;
      let resu = reg.exec(str);
      if (!this.username) {
        this.$refs.nonullf.style.display = "block";
        // alert("用户名不可以为空");
      } else if (!this.user) {
        this.$refs.nophone.style.display = "none";
        this.$refs.nonullf.style.display = "none";
        this.$refs.nonullt.style.display = "none";
        this.$refs.nonulls.style.display = "block";
        // alert("账号不可以为空");
      } else if (resu1 === null) {
        this.$refs.nonulls.style.display = "none";
        this.$refs.nonullf.style.display = "none";
        this.$refs.nonullt.style.display = "none";
        this.$refs.nophone.style.display = "block";
        // console.log("账号必须是11位的手机号");
      } else if (!this.pass) {
        this.$refs.nophone.style.display = "none";
        this.$refs.nonullf.style.display = "none";
        this.$refs.nonulls.style.display = "none";
        this.$refs.nonullt.style.display = "block";
        // alert("密码不可以为空");
      } else if (resu === null) {
        
        this.$refs.nonulls.style.display = "none";
        this.$refs.nonullf.style.display = "none";
        this.$refs.nonullt.style.display = "none";
        this.$refs.nophone.style.display = "none";
        // alert(
        //   "密码必须是8-16位的数字，字母组合（不能是纯数字，不可以有特殊字符）"
        // );
        Toast.fail("密码格式错误！！！")
      } else {
        this.$refs.nophone.style.display = "none";
        this.$refs.nonullf.style.display = "none";
        this.$refs.nonulls.style.display = "none";
        this.$refs.nonullt.style.display = "none";
        let eit = this.form.type ? 1 : 0;
        this.$store
          .dispatch("register/register", {
            userName: this.usern,
            password: this.pass,
            name: this.username,
            author: eit,
          })
          .then((res) => {
              console.log(res);
            if (res.code === 200) {
              Toast.success(res.msg);
              this.$router.history.push('/login')
            }else if(res.code === 201){
              Toast.fail(res.msg)
            }
          });
      }
    },
    close(res) {
      this.alertFlags = res;
      this.$router.history.go(-1);
    },
    closes() {
      this.$router.history.go(-1);
    },
  },
};
</script>

<style scoped>
/* @import url(); 引入css类 */
@import url("../../../static/fonts/iconfont.css");
.passguanbi {
  display: none;
}
.guize {
  color: #a0a0a0;
  font-family: monospace;
}
.yi {
  position: absolute;
 right: 0.453333rem;
  color: #8d8c8c;
  bottom: 0.853333rem;
}
.loginbox {
  width: 100vw;
  height: 100vh;
  background: white;
  background-image: linear-gradient(to bottom , #f4859f 20% , white 108%);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999;
  overflow: hidden;
}
.loginbox > span:first-of-type {
  width: 1.333333rem;
  height: 1.333333rem;
  position: absolute;
  top: 0.266667rem;
  left: 0.533333rem;
  font-size: 0.693333rem;
  color: white;
}
.header {
  width: 100vw;
  height: 6.133333rem;
  /* background: #f33a65; */
  line-height: 8rem;
  /* border-radius: 0 0 20% 20%; */
}
.header h3 {
  width: 1.333333rem;
  height: 1.333333rem;
  text-align: center;
  font-weight: bold;
  font-size: 0.586667rem;
  margin: 0px auto;
  color: white;
}
.header p {
  width: 4.333333rem;
  height: 1.333333rem;
  text-align: center;
  margin: 0px auto;
  color: white;
}
.inputlogin {
  width: 80%;
  height: 5.333333rem;
  margin: 0.533333rem auto;
  z-index: 999;
  position: relative;
}
.inputlogin input {
  width: 100%;
  height: 1rem;
  border: none;
  outline: none;
  border-bottom: 2px solid #f3f2f2;
    color: #868686;
  padding-left: .8rem;
  background: rgba(0, 0, 0, 0);
}
.icon-user{
  position: absolute;
  top: 0.17rem;
  left: 0.053333rem;
  font-size: 0.533333rem;
  color: white;
}
.icon-shouji{
  position: absolute;
  top: 2.06rem;
  left: 0.053333rem;
  font-size: 0.533333rem;
  color: white;
}
.icon-mima1{
  position: absolute;
  top: 3.789rem;
  left: 0.053333rem;
  font-size: 0.693333rem;
  color: white;
}
.but {
  width: 100%;
  height: 1.066667rem;
}
.login {
  width: 45%;
  outline: none;
  border: 0;
  line-height: 1.066667rem;
  color: white;
  border-radius: 0.106667rem;
  background: #f33a65;
}
.register {
  width: 100%;
  outline: none;
  border: 0;
  line-height: 1.066667rem;
  color: white;
  border-radius: 4px;
  background: #f33a65;
}
.active {
  background: #f33a65;
}
.xuanzhong {
  width: 100%;
  height: 1.066667rem;
}
.xuanzhong input {
  width: 16px;
  height: 16px;
  margin-top: 10px;
  display: inline-block;
}
.xuanzhong span {
  display: inline-block;
}
.alert {
  width: 100%;
  height: 0.853333rem;
}
.alert p {
  font-style: italic;
  display: none;
  color: #f33a65;
}
</style>